<template>
  <div class="demo-progress">
    <el-row class="row-bg" justify="space-around">
      <el-col :span="6">
        <el-progress type="dashboard" :percentage=percentDay>
          <template #default="{ percentage }">
            <span class="percentage-value">{{ percentage }}%</span>
            <span class="percentage-label">当日完成率</span>
          </template>
        </el-progress>
      </el-col>
      <el-col :span="6">
        <el-progress type="dashboard" :percentage=percentWeek>
          <template #default="{ percentage }">
            <span class="percentage-value">{{ percentage }}%</span>
            <span class="percentage-label">本周完成率</span>
          </template>
        </el-progress>
      </el-col>
      <el-col :span="6">
        <el-progress type="dashboard" :percentage=percentMonth>
          <template #default="{ percentage }">
            <span class="percentage-value">{{ percentage }}%</span>
            <span class="percentage-label">当月完成率</span>
          </template>
        </el-progress>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { Check } from '@element-plus/icons-vue'
import userCount from '@/stores/userCount'
import { storeToRefs } from 'pinia';
import { ref } from 'vue';
const store = userCount();
const { dataInfo } = storeToRefs(store)
const data = ref(dataInfo)
let perDay = data.value.percentDay * 100
let perWeek = data.value.percentWeek * 100
let perMonth = data.value.percentMonth * 100

let percentDay = String(perDay)
let percentWeek = String(perWeek)
let percentMonth = String(perMonth)
</script>

<style scoped>
.percentage-value {
  display: block;
  margin-top: 10px;
  font-size: 28px;
}

.percentage-label {
  display: block;
  margin-top: 10px;
  font-size: 12px;
}

.demo-progress .el-progress--line {
  margin-bottom: 15px;
  width: 350px;
}

.demo-progress .el-progress--circle {
  margin-right: 15px;
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
